<template>
  <div class="flx-row-s-c" v-if="!user">
    <i class="location-icon"></i>
    <router-link to="/" class="no-current link-item">首页</router-link>
    <template v-for="(item, index) in list">
      <span class="no-first" :key="'a' + index"></span>
      <router-link
        v-if="index != list.length - 1"
        :key="'b' + index"
        :to="item.to"
        class="link-item no-current"
        >{{ item.name }}</router-link
      >
      <span v-else :key="'b' + index" class="link-item current">{{
        item.name
      }}</span>
    </template>
  </div>
  <div class="flx-row-s-c" v-else>
    <i class="location-icon"></i>
    <span class="pub-m-l-10 c-black">首页</span>
    <span class="no-first pub-m-l-10"></span>
    <template v-for="(item, index) in list">
      <span class="no-first" v-if="index != 0" :key="'a' + index"></span>
      <span :key="'b' + index" class="link-item">{{ item.name }}</span>
    </template>
  </div>
</template>

<script>
export default {
  name: "VipBreadcrumb",
  props: {
    list: {
      default: () => [],
    },
    user: {
      default: false,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.location-icon {
  display: inline-block;
  @include size(2px, 10px);
  background: $mainColor;
}
.link-item {
  font-size: 14px;
  padding: 0 10px;
  color: #000;
}
.no-current {
  @include h-c(null, null, #898989, #f9521f);
}
.current {
  color: #000;
}
.no-first {
  display: inline-block;
  @include size(13px);
  @include bg-setting("next-right", 11px 13px, center);
}
</style>